<template>
    <el-card class="box-card" shadow="hover" style="margin-bottom: 15px;">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-button icon="el-icon-arrow-left" type="text" class="back" v-if="showBack" @click="back">返回</el-button>
            <template v-for="item in menulist">
                <el-breadcrumb-item>{{item}}</el-breadcrumb-item>
            </template>
        </el-breadcrumb>
        <el-select class="system_select" v-model="value_system" @change="handleChange" v-if="showSystem" filterable placeholder="请选择解决方案">
            <el-option
                    v-for="item in solutionsSelect"
                    :key="item.solutionId"
                    :label="item.solutionName"
                    :value="item.solutionId">
            </el-option>
        </el-select>
    </el-card>
</template>
<script>
    import {request, url} from "../api/request";

    export default {
        name: 'breadcrumb',
        data() {
            return {
                value_system: '',
                solutionsSelect: [],
            }
        },
        props: {
            menulist: {
                type: Array,
                default: []
            },
            showSystem: {
                type: Boolean,
                default: true
            },
            showBack:{
                type: Boolean,
                default: false
            },
            componentType: {
                type: Number,
                default: 1
            }
        },
        computed:{
            // value_system : {
            //     get(){
            //         let solution_global = this.$store.state.solution_global;
            //         if (solution_global) {
            //             this.$emit('changeSolution', solution_global)
            //             return solution_global;
            //         }
            //         return {};
            //     },
            //     set(v){}
            // },
        },
        mounted() {
            this.showSystem && this.getSolutionsSelect1();
        },

        created() {

        },
        methods: {
            // 所属产品
            getSolutionsSelect1() {
                // console.log(this.componentType);
                let type = 1;
                if (this.componentType == 2) {
                    type = 0;
                } else if (this.componentType == 10) {
                    type = 10;
                }
                request(`${url.solutionsSelect}/${type}`, {
                    method: 'GET',
                    data: {}
                }, res => {
                    this.solutionsSelect = res.data;
                    console.log(this.$store.state.solution_global);
                    let hassolutionsSelect = this.solutionsSelect.find(item => item.solutionId == (this.$store.state.solution_global && this.$store.state.solution_global.solutionId));
                    console.log(hassolutionsSelect);
                    if (hassolutionsSelect) {
                        this.value_system = this.$store.state.solution_global && this.$store.state.solution_global.solutionId || null;
                    }else {
                        this.value_system = null;
                        this.$store.state.solution_global = null;
                    }
                    
                })
            },
            handleChange(value) {
                let solution_global = this.solutionsSelect.find(item => item.solutionId === value);
                this.$store.state.solution_global = solution_global;
                this.$emit('changeSolution', solution_global)
            },
            back(){
                // history.back();
                this.$router.back(-1)
            },

        },

    }
</script>

<style scoped>

    .el-breadcrumb__item {
        line-height: 40px;
    }

    .box-card {
        position: relative;
    }

    .system_select {
        width: 300px;
        position: absolute;
        top: 20px;
        right: 30px;
    }
    .back{
        height: 40px;
        line-height: 40px;
        border: 0;
        float: left;
        margin: 0 20px 0 0;
        padding: 0;
        /*font-size: 15px;*/
        font-weight: bold;
    }
</style>
